<template>
  <div class="terminology">
    <div class="page-header">
      <h2>术语库管理</h2>
      <p>管理二次设备和一次设备术语库</p>
    </div>
    
    <el-tabs v-model="activeTab" class="terminology-tabs">
      <!-- 二次设备术语 -->
      <el-tab-pane label="二次设备术语" name="secondary">
        <el-card class="terminology-card">
          <template #header>
            <div class="card-header">
              <h3>二次设备关键字</h3>
              <div class="header-actions">
                <el-input v-model="secondarySearchText" placeholder="搜索关键字" style="width: 200px; margin-right: 10px;" />
                <el-button type="primary" @click="addSecondaryTerm">
                  <el-icon><Plus /></el-icon>
                  添加关键字
                </el-button>
              </div>
            </div>
          </template>
          
          <!-- 数据统计信息 -->
          <div class="data-summary">
            <el-descriptions :column="3" border>
              <el-descriptions-item label="关键字数量">{{ filteredSecondaryTerms.length }}</el-descriptions-item>
              <el-descriptions-item label="启用状态">{{ activeSecondaryCount }}</el-descriptions-item>
              <el-descriptions-item label="最后更新时间">{{ secondaryLastUpdate }}</el-descriptions-item>
            </el-descriptions>
          </div>
          
          <el-table :data="filteredSecondaryTerms" stripe border class="terminology-table">
            <el-table-column prop="keyword" label="关键字" width="280" align="center">
              <template #default="scope">
                <el-tag type="primary" class="keyword-tag">{{ scope.row.keyword }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="排除关键字">
              <template #default="scope">
                <div v-if="scope.row.avoidKeyword" class="text-content remark-text">
                  <el-tag type="primary" class="avoid-keyword-tag">{{ scope.row.avoidKeyword }}</el-tag>
                </div>
                <div v-else class="text-content empty-content">—</div>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注">
              <template #default="scope">
                <div v-if="scope.row.remark" class="text-content remark-text">
                  {{ scope.row.remark }}
                </div>
                <div v-else class="text-content empty-content">—</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140" align="center">
              <template #default="scope">
                <div class="action-buttons">
                  <el-tooltip content="编辑" placement="top">
                    <el-button size="small" class="edit-btn" @click="editSecondaryTerm(scope.row)">
                      <el-icon><Edit /></el-icon>
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button size="small" class="delete-btn" @click="deleteSecondaryTerm(scope.row)">
                      <el-icon><Delete /></el-icon>
                    </el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      
      <!-- 一次设备术语 -->
      <el-tab-pane label="一次设备术语" name="primary">
        <el-card class="terminology-card">
          <template #header>
            <div class="card-header">
              <h3>一次设备编写原则</h3>
              <div class="header-actions">
                <el-input v-model="primarySearchText" placeholder="搜索设备类型或编写原则" style="width: 250px; margin-right: 10px;" class="custom-input" />
                <!-- <el-button type="primary" @click="addPrimaryTermClass">
                  <el-icon><Plus /></el-icon>
                  添加设备类型
                </el-button> -->
                <el-button type="primary" @click="addPrimaryTermPrincipal">
                  <el-icon><Plus /></el-icon>
                  添加原则
                </el-button>
              </div>
            </div>
          </template>
          
          <!-- 数据统计信息 -->
          <div class="data-summary">
            <el-descriptions :column="4" border>
              <el-descriptions-item label="设备类型数量">{{ deviceTypesCount }}</el-descriptions-item>
              <el-descriptions-item label="编写原则数量">{{ principlesCount }}</el-descriptions-item>
              <el-descriptions-item label="删除项数量">{{ deletedCount }}</el-descriptions-item>
              <el-descriptions-item label="最后更新时间">{{ primaryLastUpdate }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 第一部分：设备初始、目标状态 -->
          <div class="device-section">
            <h4 class="section-title-enhanced states-title">
              <el-icon class="title-icon"><Setting /></el-icon>
              设备状态
              <div class="title-decoration"></div>
            </h4>
            <div class="device-states-display">
              <el-tag 
                v-for="state in deviceStates" 
                :key="state" 
                :type="success"
                class="state-tag"
                size="large"
                closable
                @close="handleDeleteState(state.stateName)"
              >
                {{ state.stateName }}
              </el-tag>
                            
<el-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="w-auto min-w-28 max-w-xs custom-input"
      size="large"
      clearable
      @clear ="handleInputClear"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-button v-else class="button-new-tag w-28" size="large" @click="showInput">
      + 新增
    </el-button>
            </div>
          </div>

          <!-- 第二部分：主要设备类型 -->
          <div class="device-section">
            <h4 class="section-title-enhanced devices-title">
              <el-icon class="title-icon"><Cpu /></el-icon>
              规则分类
              <div class="title-decoration"></div>
            </h4>
            <el-collapse v-model="activePanels" class="hierarchy-collapse">
              <template v-for="deviceType in mainDeviceTypes" :key="deviceType.id">
                <el-collapse-item :name="deviceType.id.toString()" class="device-type-panel">
                <template #title>
                  <div class="device-type-header" :class="{ 'deleted-item': deviceType.isDeleted }">
                    <el-tag 
                      :type="deviceType.isDeleted ? 'danger' : 'success'" 
                      class="device-type-tag"
                      size="large"
                    >
                      {{ deviceType.deviceType }}
                    </el-tag>
                    <span class="principle-count">
                      ({{ deviceType.principles ? deviceType.principles.length : 0 }}条编写原则)
                    </span>
                      <el-button v-if="deviceType.principles?(deviceType.principles.length === 0):(true)"
                        type="danger" 
                        :icon="Delete" 
                        circle 
                        title="移除设备分类"
                        @click="deletePrimaryTerm(deviceType)"
                        class="delete-btn-center"
                      />
                    <el-badge 
                      v-if="deviceType.isDeleted" 
                      value="已删除" 
                      class="deleted-badge"
                    />
                  </div>
                </template>
                
                <!-- 编写原则列表 -->
                <div class="principles-container">
                  <div v-if="!deviceType.principles || deviceType.principles.length === 0" class="no-principles">
                    暂无编写原则
                  </div>
                  <div v-else>
                    <div 
                      v-for="(principle, index) in deviceType.principles" 
                      :key="principle.id"
                      class="principle-item"
                      :class="{ 'deleted-principle': principle.isDeleted }"
                    >
                        <el-badge 
                          v-if="principle.isDeleted" 
                          value="删除" 
                          class="deleted-badge-small"
                        />
                      
                      <div class="principle-content">
                        <div class="principle-row">
                          <label class="field-label">编写原则：</label>
                          <div class="field-content principle-text">
                            {{ principle.writingPrinciple || '—' }}
                          </div>
                          <el-button size="small" type="primary" @click="editPrimaryTerm(principle)">
                            <el-icon><Edit /></el-icon>
                              编辑
                          </el-button>
                          <el-button size="small" type="danger" @click="deletePrimaryTerm(principle)">
                            <el-icon><Delete /></el-icon>
                                删除
                          </el-button>
                        </div>
                        
                        <div class="principle-row" v-if="principle.typicalExample">
                          <label class="field-label">典型示例：</label>
                          <div class="field-content example-text">
                            {{ principle.typicalExample }}
                          </div>
                        </div>
                        
                        <div class="principle-row">
                          <label class="field-label">特殊说明：</label>
                          <div class="field-content notes-text">
                            {{ principle.remark || '暂无说明' }}
                          </div>
                        </div>
                        
                        <!-- <div class="principle-row" v-if="principle.validationMessage">
                          <label class="field-label">校核提示：</label>
                          <div class="field-content validation-text">
                            {{ principle.validationMessage }}
                          </div>
                        </div> -->
                      </div>
                      
                      
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </template>
            </el-collapse>
          </div>

          <!-- 第三部分：以下考虑删除 -->
          <div class="device-section deleted-section">
            <h4 class="section-title-enhanced deleted-title">
              <el-icon class="title-icon"><WarningFilled /></el-icon>
              以下考虑删除
              <div class="title-decoration"></div>
            </h4>
            <div v-if="inMainSectionDeletedTypes.length === 0" class="no-deleted-items">
              暂无考虑删除的设备类型
            </div>
            <el-collapse v-else v-model="subDeletedPanels" class="hierarchy-collapse deleted-collapse">
              <template v-for="deviceType in inMainSectionDeletedTypes" :key="deviceType.id">
                <el-collapse-item :name="deviceType.id.toString()" class="device-type-panel deleted-panel">
                  <template #title>
                    <div class="device-type-header deleted-item">
                      <el-tag type="danger" class="device-type-tag" size="large">
                        {{ deviceType.deviceType }}
                      </el-tag>
                      <span class="principle-count">
                        ({{ deviceType.principles ? deviceType.principles.length : 0 }}条编写原则)
                      </span>
                      <el-badge value="考虑删除" class="deleted-badge" />
                    </div>
                  </template>
                  
                  <div class="principles-container">
                    <div v-for="principle in deviceType.principles" :key="principle.id" class="principle-card deleted-principle">
                      <div class="principle-content">
                        <div class="principle-row">
                          <label class="field-label">编写原则：</label>
                          <div class="field-content principle-text">
                            {{ principle.writingPrinciple || '—' }}
                          </div>
                        </div>
                        
                        <div class="principle-row" v-if="principle.typicalExample">
                          <label class="field-label">典型示例：</label>
                          <div class="field-content example-text">
                            {{ principle.typicalExample }}
                          </div>
                        </div>
                        
                        <div class="principle-row">
                          <label class="field-label">特殊说明：</label>
                          <div class="field-content notes-text">
                            {{ principle.remark || '暂无说明' }}
                          </div>
                        </div>
                        
                        <!-- <div class="principle-row" v-if="principle.validationMessage">
                          <label class="field-label">校核提示：</label>
                          <div class="field-content validation-text">
                            {{ principle.validationMessage }}
                          </div>
                        </div> -->
                      </div>
                      
                      <div class="principle-actions">
                        <el-button size="small" type="primary" @click="editPrimaryTerm(principle)">
                          <el-icon><Edit /></el-icon>
                          编辑
                        </el-button>
                        <el-button size="small" type="danger" @click="deletePrimaryTerm(principle)">
                          <el-icon><Delete /></el-icon>
                          删除
                        </el-button>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </template>
            </el-collapse>
          </div>

          <!-- 其他删除项（如果有的话） -->
          <div v-if="deletedDeviceTypes.length > 0" class="device-section deleted-section">
            <h4 class="section-title">其他删除项</h4>
            <el-collapse v-model="deletedActivePanels" class="hierarchy-collapse deleted-collapse">
              <template v-for="deviceType in deletedDeviceTypes" :key="deviceType.id">
                <el-collapse-item :name="deviceType.id.toString()" class="device-type-panel deleted-panel">
                  <template #title>
                    <div class="device-type-header deleted-item">
                      <el-tag type="danger" class="device-type-tag" size="large">
                        {{ deviceType.deviceType }}
                      </el-tag>
                      <span class="principle-count">
                        ({{ deviceType.principles ? deviceType.principles.length : 0 }}条编写原则)
                      </span>
                      <el-badge value="考虑删除" class="deleted-badge" />
                    </div>
                  </template>
                  
                  <div class="principles-container">
                    <div v-for="principle in deviceType.principles" :key="principle.id" class="principle-card deleted-principle">
                      <div class="principle-content">
                        <div class="principle-row">
                          <label class="field-label">编写原则：</label>
                          <div class="field-content principle-text">
                            {{ principle.writingPrinciple || '—' }}
                          </div>
                        </div>
                        
                        <div class="principle-row" v-if="principle.typicalExample">
                          <label class="field-label">典型示例：</label>
                          <div class="field-content example-text">
                            {{ principle.typicalExample }}
                          </div>
                        </div>
                        
                        <div class="principle-row">
                          <label class="field-label">特殊说明：</label>
                          <div class="field-content notes-text">
                            {{ principle.remark || '暂无说明' }}
                          </div>
                        </div>
                        
                        <!-- <div class="principle-row" v-if="principle.validationMessage">
                          <label class="field-label">校核提示：</label>
                          <div class="field-content validation-text">
                            {{ principle.validationMessage }}
                          </div>
                        </div> -->
                      </div>
                      
                      <div class="principle-actions">
                        <el-button size="small" type="primary" @click="editPrimaryTerm(principle)">
                          <el-icon><Edit /></el-icon>
                          编辑
                        </el-button>
                        <el-popconfirm title="确定删除这条编写原则吗？" @confirm="deletePrimaryTerm(principle.id)">
                          <template #reference>
                            <el-button size="small" type="danger">
                              <el-icon><Delete /></el-icon>
                              删除
                            </el-button>
                          </template>
                        </el-popconfirm>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </template>
            </el-collapse>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    
    <!-- 添加/编辑对话框 -->
    <el-dialog 
      v-model="dialogVisible" 
      :title="dialogTitle" 
      width="700px"
      class="custom-dialog"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <div class="dialog-content">
        <el-form 
          :model="currentTerm" 
          label-width="120px" 
          class="custom-form"
          label-position="top"
        >
          <!-- 二次设备字段 -->
          <template v-if="activeTab === 'secondary'">
            <el-form-item label="关键字" class="form-item-enhanced">
              <el-input 
                v-model="currentTerm.keyword" 
                placeholder="请输入关键字"
                class="custom-input"
                clearable
              />
            </el-form-item>
            <el-form-item label="排除关键字" class="form-item-enhanced">
              <el-input 
                v-model="currentTerm.avoidKeyword" 
                placeholder="请输入排除关键字"
                class="custom-input"
                clearable
              />
            </el-form-item>
            <el-form-item label="典型示例" class="form-item-enhanced">
                <el-input 
                  v-model="currentTerm.typicalExample" 
                  type="textarea" 
                  :rows="3" 
                  placeholder="请输入典型示例（如：执行1号代路侧临时措施单）"
                  class="custom-textarea"
                  maxlength="1000"
                  show-word-limit
                />
              </el-form-item>
            <el-form-item label="备注说明" class="form-item-enhanced">
              <el-input 
                v-model="currentTerm.remark" 
                type="textarea" 
                :rows="4" 
                placeholder="请输入备注说明"
                class="custom-textarea"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </template>
          
          <!-- 一次设备字段 -->
          <template v-if="activeTab === 'primary'">
            <el-form-item label="规则分页" class="form-item-enhanced">
              <el-select v-model="currentTerm.deviceType" placeholder="默认分页" style="width: 240px"
               default-first-option
               allow-create
               filterable
                >
                <el-option
                  v-for="item in hierarchyData" 
                  :key="item.id" 
                  :label="item.deviceType"
                   :value="item.deviceType"
                 />
              </el-select>
            </el-form-item>
            
            <el-form-item label="编写原则" class="form-item-enhanced">
              <el-input 
                v-model="currentTerm.writingPrinciple" 
                type="textarea" 
                :rows="4" 
                placeholder="请输入编写原则（如：将（XX主变）由（初始状态）转（目标状态））"
                class="custom-textarea"
                maxlength="1000"
                show-word-limit
              />
            </el-form-item>
            
            <el-form-item label="典型示例" class="form-item-enhanced">
              <el-input 
                v-model="currentTerm.typicalExample" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入典型示例（如：将220kV#1主变由冷备用转热备用）"
                class="custom-textarea"
                maxlength="1000"
                show-word-limit
              />
              
            </el-form-item>
            
            <el-form-item label="特殊说明" class="form-item-enhanced">
              <el-input 
                v-model="currentTerm.remark" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入特殊说明（可选）"
                class="custom-textarea"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
            
            <!-- <el-form-item label="校核提示语" class="form-item-enhanced">
              <el-input 
                v-model="currentTerm.validationMessage" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入校核不通过时的提示语"
                class="custom-textarea"
                maxlength="500"
                show-word-limit
              />
            </el-form-item> -->
          </template>
        </el-form>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" class="cancel-btn">
            取消
          </el-button>
          <el-button type="primary"  @click="testTerm" class="save-btn">
            <el-icon class="mr-1"><el-icon><Aim /></el-icon></el-icon>
            测试
          </el-button>
          <el-button type="primary" @click="saveTerm" class="save-btn">
            <el-icon class="mr-1"><Check /></el-icon>
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete, ArrowRight, Check, Setting, Cpu, WarningFilled } from '@element-plus/icons-vue'
import { terminologyApi } from '@/services/api'

// 响应式数据
const activeTab = ref('secondary')
const secondaryTerms = ref([])
const primaryTerms = ref([])
const hierarchyData = ref([])
const dialogVisible = ref(false)
const dialogTitle = ref('')
const currentTerm = ref({})

// 新增层级展示相关数据
const activePanels = ref([])
const deletedActivePanels = ref([])
const subDeletedPanels = ref([])

// 搜索相关
const secondarySearchText = ref('')
const primarySearchText = ref('')

// 计算属性 - 筛选后的数据
const filteredSecondaryTerms = computed(() => {
  if (!secondarySearchText.value) return secondaryTerms.value
  return secondaryTerms.value.filter((item: any) => 
    item.keyword?.toLowerCase().includes(secondarySearchText.value.toLowerCase()) ||
    item.remark?.toLowerCase().includes(secondarySearchText.value.toLowerCase())
  )
})

// 分离主要设备类型、在主要部分中删除的类型、和其他删除类型
const mainDeviceTypes = computed(() => {
  const baseData = primarySearchText.value ? filteredHierarchyData.value : hierarchyData.value
  // 主要设备类型：不包括"旁代操作"和"其他"，且未删除
  return baseData.filter((deviceType: any) => 
    !deviceType.isDeleted && 
    deviceType.deviceType !== '旁代操作' && 
    deviceType.deviceType !== '其他'
  )
})

const inMainSectionDeletedTypes = computed(() => {
  const baseData = primarySearchText.value ? filteredHierarchyData.value : hierarchyData.value
  // 第三部分显示的项：只包括"旁代操作"和"其他"，无论是否标记删除
  return baseData.filter((deviceType: any) => 
    deviceType.deviceType === '旁代操作' || deviceType.deviceType === '其他'
  )
})

const deletedDeviceTypes = computed(() => {
  const baseData = primarySearchText.value ? filteredHierarchyData.value : hierarchyData.value
  // 其他删除的设备类型（如果有的话）
  return baseData.filter((deviceType: any) => 
    deviceType.isDeleted && 
    deviceType.deviceType !== '旁代操作' && 
    deviceType.deviceType !== '其他'
  )
})

const filteredHierarchyData = computed(() => {
  if (!primarySearchText.value) return hierarchyData.value
  const searchTerm = primarySearchText.value.toLowerCase()
  return hierarchyData.value.filter((deviceType: any) => {
    // 搜索设备类型名称
    const deviceTypeMatch = deviceType.deviceType?.toLowerCase().includes(searchTerm)
    
    // 搜索编写原则内容
    const principlesMatch = deviceType.principles?.some((principle: any) =>
      principle.writingPrinciple?.toLowerCase().includes(searchTerm) ||
      principle.typicalExample?.toLowerCase().includes(searchTerm) ||
      principle.remark?.toLowerCase().includes(searchTerm) ||
      principle.initialState?.toLowerCase().includes(searchTerm) ||
      principle.targetState?.toLowerCase().includes(searchTerm)
    )
    
    return deviceTypeMatch || principlesMatch
  })
})

// 计算属性 - 统计信息
const activeSecondaryCount = computed(() => 
  secondaryTerms.value.filter((item: any) => item.status === 1).length
)

// 新增一次设备术语统计
const deviceTypesCount = computed(() => 
  hierarchyData.value.filter((item: any) => !item.isDeleted).length
)

const principlesCount = computed(() => {
  return hierarchyData.value.reduce((total: number, deviceType: any) => {
    if (deviceType.principles) {
      return total + deviceType.principles.filter((p: any) => !p.isDeleted).length
    }
    return total
  }, 0)
})

const deletedCount = computed(() => {
  let deletedDeviceTypes = hierarchyData.value.filter((item: any) => item.isDeleted).length
  let deletedPrinciples = hierarchyData.value.reduce((total: number, deviceType: any) => {
    if (deviceType.principles) {
      return total + deviceType.principles.filter((p: any) => p.isDeleted).length
    }
    return total
  }, 0)
  return deletedDeviceTypes + deletedPrinciples
})
import { nextTick, ref } from 'vue'

import type { InputInstance } from 'element-plus'
// 第一部分：获取设备状态列表
const deviceStates = ref([])


const inputValue = ref('')
const inputVisible = ref(false)
const InputRef = ref<InputInstance>()
const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}
const handleInputConfirm = async() => {
  try {
    deviceStates.value = await terminologyApi.addDeviceState(inputValue.value)
    inputVisible.value = false
    inputValue.value = ''
  } catch (error) {
    inputVisible.value = false
    inputValue.value = ''
  }
  
  
}
const handleDeleteState = async(stateName: string) => {
  deviceStates.value = await terminologyApi.deleteDeviceState(stateName)
}
const handleInputClear = () => {
  inputValue.value = ''
  inputVisible.value = false
}
const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}


const activePrimaryCount = computed(() => 
  primaryTerms.value.filter((item: any) => item.status === 1).length
)

const secondaryLastUpdate = computed(() => {
  if (!secondaryTerms.value.length) return '暂无数据'
  const lastUpdate = secondaryTerms.value.reduce((latest: any, item: any) => {
    const itemTime = new Date(item.updatedTime || item.createdTime)
    return itemTime > latest ? itemTime : latest
  }, new Date(0))
  return lastUpdate.toLocaleString()
})

const primaryLastUpdate = computed(() => {
  if (!primaryTerms.value.length) return '暂无数据'
  const lastUpdate = primaryTerms.value.reduce((latest: any, item: any) => {
    const itemTime = new Date(item.updatedTime || item.createdTime)
    return itemTime > latest ? itemTime : latest
  }, new Date(0))
  return lastUpdate.toLocaleString()
})

// 数据加载方法
const loadSecondaryTerms = async () => {
  try {
    const response = await terminologyApi.getSecondaryTerms()
    secondaryTerms.value = response
  } catch (error: any) {
    ElMessage.error('加载二次设备术语失败: ' + error.message)
  }
}

const loadPrimaryTerms = async () => {
  try {
    const response = await terminologyApi.getPrimaryTerms()
    primaryTerms.value = response
  } catch (error: any) {
    ElMessage.error('加载一次设备术语失败: ' + error.message)
  }
}

// 新增：加载分层数据
const fetchPrimaryTermsHierarchy = async () => {
  try {
    let deviceTypes = []
    let deletedData = []
    
    // 获取正常数据
    const normalResponse = await terminologyApi.getPrimaryTermsHierarchy()
    
    // 始终获取删除的数据
    const deletedResponse = await terminologyApi.getDeletedPrimaryTerms()
    deletedData = deletedResponse || []
    
    // 合并数据并构建层级结构
    const allData = [...(normalResponse || []), ...deletedData]
    const hierarchyMap = new Map()
    
    // 先处理设备类型（父记录）
    allData.filter(item => item.isTemplate === 1).forEach(deviceType => {
      hierarchyMap.set(deviceType.id, {
        ...deviceType,
        principles: []
      })
    })
    
    // 再处理编写原则（子记录）
    allData.filter(item => item.isTemplate === 0).forEach(principle => {
      const parent = hierarchyMap.get(principle.parentId)
      if (parent) {
        parent.principles.push(principle)
      }
    })
    
    // 转换为数组并排序
    const sortedData = Array.from(hierarchyMap.values()).sort((a, b) => {
      // 删除项排到最后
      if (a.isDeleted !== b.isDeleted) {
        return a.isDeleted - b.isDeleted
      }
      return a.displayOrder - b.displayOrder
    })
    
    // 对每个设备类型的编写原则进行排序
    sortedData.forEach(deviceType => {
      if (deviceType.principles) {
        deviceType.principles.sort((a: any, b: any) => {
          if (a.isDeleted !== b.isDeleted) {
            return a.isDeleted - b.isDeleted
          }
          return a.displayOrder - b.displayOrder
        })
      }
    })

    
    hierarchyData.value = sortedData;
    
  } catch (error: any) {
    console.error('加载层级数据失败:', error)
    ElMessage.error('加载层级数据失败: ' + error.message)
  }
}

const addSecondaryTerm = () => {
  currentTerm.value = { keyword: '', remark: '' }
  dialogTitle.value = '添加二次设备关键字'
  dialogVisible.value = true
}

// const addPrimaryTermClass = () => {
//   currentTerm.value = { 
//     deviceType: '', 
//     writingPrinciple: '', 
//     typicalExample: '', 
//     remark: '', 
//     validationMessage: ''
//   }
//   dialogTitle.value = '添加一次设备类型'
//   dialogVisible.value = true
// }

const addPrimaryTermPrincipal = () => {
  currentTerm.value = { 
    deviceType: '', 
    writingPrinciple: '', 
    typicalExample: '', 
    remark: ''
  }
  dialogTitle.value = '添加一次设备编写原则'
  dialogVisible.value = true
}


const editSecondaryTerm = (term: any) => {
  currentTerm.value = { ...term }
  dialogTitle.value = '编辑二次设备关键字'
  dialogVisible.value = true
}

const editPrimaryTerm = (term: any) => {
  currentTerm.value = { ...term }
  dialogTitle.value = '编辑一次设备编写原则'
  dialogVisible.value = true
}

const deleteSecondaryTerm = async (term: any) => {
  try {
    await ElMessageBox.confirm('确定要删除这个关键字吗？', '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await terminologyApi.deleteSecondaryTerm(term.id)
    ElMessage.success('删除成功')
    loadSecondaryTerms()
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败: ' + error.message)
    }
  }
}

const deletePrimaryTerm = async (term: any) => {
  try {
    await ElMessageBox.confirm('确定要删除这个编写原则吗？', '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await terminologyApi.deletePrimaryTerm(term.id)
    ElMessage.success('删除成功')
    loadPrimaryTerms()
    fetchPrimaryTermsHierarchy()
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败: ' + error.message)
    }
  }
}

const saveTerm = async () => {
  try {
    if (activeTab.value === 'secondary') {
      await terminologyApi.saveSecondaryTerm(currentTerm.value)
      ElMessage.success('保存成功')
      loadSecondaryTerms()
    } else {
      currentTerm.value.status = 1;
      currentTerm.value.isTemplate = 0;
      await terminologyApi.savePrimaryTerm(currentTerm.value)
      ElMessage.success('保存成功')
      loadPrimaryTerms()
      fetchPrimaryTermsHierarchy()
    }
    dialogVisible.value = false
  } catch (error: any) {
    ElMessage.error('保存失败: ' + error.message)
  }
}

const testTerm = async () => {
  try {
    let result = null;
    if (activeTab.value === 'primary') {
      currentTerm.value.status = 1;
      currentTerm.value.isTemplate = 0;
      result = await terminologyApi.testPrimaryTerm(currentTerm.value)
    }
    if (activeTab.value === 'secondary') {
      result = await terminologyApi.testSecondaryTerm(currentTerm.value)  
    }

    if (result.isValid === true) {
      ElMessage.success('测试成功')    
    }else {
      ElMessage.error('测试失败: ' + result.errorMessage === '' ? '不匹配，无提示' : result.errorMessage)
    }
  } catch (error: any) {
    ElMessage.error('错误: ' + error.message)
  }
}

// 生命周期
onMounted(async() => {
  loadSecondaryTerms()
  loadPrimaryTerms()
  fetchPrimaryTermsHierarchy()
  deviceStates.value = await terminologyApi.getDeviceStates()
})

</script>

<style scoped>
.terminology {
  background: #f8f9fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 0;
  padding: 40px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

/* 简单的几何装饰 */
.page-header::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.page-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
  z-index: 2;
}

.page-header p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  position: relative;
  z-index: 2;
}

.terminology-tabs {
  margin: 0 auto;
  max-width: 1200px;
  padding: 20px;
  margin-top: -20px;
}

.terminology-card {
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
  position: relative;
}

/* 备用方案，如果渐变文字不支持 */
@supports not (-webkit-background-clip: text) {
  .card-header h3 {
    color: #667eea !important;
    text-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
  }
}

/* 表格整体样式 */
.terminology-table {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

:deep(.terminology-table) {
  border: none !important;
}

/* 表格头部样式 */
:deep(.terminology-table .el-table__header-wrapper) {
  background: #2d3748;
}

:deep(.terminology-table th) {
  background: #2d3748 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: none !important;
  padding: 18px 15px !important;
  text-align: center !important;
}

:deep(.terminology-table th .cell) {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* 表格行样式 */
:deep(.terminology-table tr) {
  background-color: #ffffff !important;
  transition: all 0.3s ease;
}

:deep(.terminology-table .el-table__row--striped) {
  background-color: #f8fafc !important;
}

:deep(.terminology-table tr:hover) {
  background-color: #f7fafc !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.terminology-table td) {
  border: none !important;
  padding: 15px 12px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

:deep(.terminology-table .cell) {
  color: #2d3748 !important;
  font-size: 14px !important;
}

/* 关键字标签样式 */
.keyword-tag {
  font-size: 13px !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  background: #f7fafc !important;
  color: #2b6cb0 !important;
  border: 2px solid #4299e1 !important;
  box-shadow: 0 2px 4px rgba(66, 153, 225, 0.2) !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: ellipsis !important;
}

.avoid-keyword-tag {
  font-size: 13px !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  background: #f7fafc !important;
  color: #b02b2bff !important;
  border: 2px solid #e14242ff !important;
  box-shadow: 0 2px 4px rgba(66, 153, 225, 0.2) !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: ellipsis !important;
}

:deep(.keyword-tag.el-tag--primary) {
  background: #f7fafc !important;
  color: #2b6cb0 !important;
  border: 2px solid #4299e1 !important;
}

/* 设备类型标签样式 */
.device-type-tag {
  font-size: 13px !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  background: #f0fff4 !important;
  color: #276749 !important;
  border: 2px solid #48bb78 !important;
  box-shadow: 0 2px 4px rgba(72, 187, 120, 0.2) !important;
}

:deep(.device-type-tag.el-tag--success) {
  background: #f0fff4 !important;
  color: #276749 !important;
  border: 2px solid #48bb78 !important;
}

/* 文字内容样式 */
.text-content {
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  line-height: 1.6;
  font-size: 14px;
  color: #2d3748;
  max-width: 100%;
  display: block;
}

.empty-content {
  color: #a0aec0;
  font-style: italic;
  text-align: center;
}

.remark-text {
  color: #4a5568;
  font-size: 14px;
  line-height: 1.6;
  font-style: italic;
  text-align: center;
}

.principle-text {
  color: #1a202c;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
}

.example-text {
  color: #2f855a;
  font-size: 14px;
  line-height: 1.6;
  padding: 2px 6px;
  background: #f0fff4;
  border-radius: 4px;
  border-left: 3px solid #48bb78;
}

.notes-text {
  color: #6b46c1;
  font-size: 14px;
  line-height: 1.6;
  padding: 2px 6px;
  background: #faf5ff;
  border-radius: 4px;
  border-left: 3px solid #9f7aea;
}

.validation-text {
  color: #c53030;
  font-size: 14px;
  line-height: 1.6;
  padding: 2px 6px;
  background: #fed7d7;
  border-radius: 4px;
  border-left: 3px solid #e53e3e;
}

.state-text {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.6;
  padding: 6px 8px;
  background: #f7fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

/* 设备状态显示区域样式 */
.device-states-display {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 10px;
}

.state-tag {
  font-size: 14px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  border: 2px solid transparent !important;
}

.state-tag:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 设备分组样式 */
.device-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 16px 0;
  padding: 8px 16px;
  background: #f7fafc;
  border-left: 4px solid #3182ce;
  border-radius: 4px;
}

/* 增强版标题样式 */
.section-title-enhanced {
  position: relative;
  font-size: 20px;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 20px 0;
  padding: 20px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.section-title-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
}

.section-title-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}

.title-icon {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.9);
  z-index: 1;
}

.title-decoration {
  position: absolute;
  right: -20px;
  top: -20px;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: rotate(45deg);
}

/* 设备状态标题特殊样式 */
.states-title {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
  box-shadow: 0 8px 25px rgba(72, 187, 120, 0.3) !important;
}

.states-title:hover {
  box-shadow: 0 12px 30px rgba(72, 187, 120, 0.4) !important;
}

/* 设备类型标题特殊样式 */
.devices-title {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
  box-shadow: 0 8px 25px rgba(66, 153, 225, 0.3) !important;
}

.devices-title:hover {
  box-shadow: 0 12px 30px rgba(66, 153, 225, 0.4) !important;
}

/* 删除部分标题特殊样式 */
.deleted-title {
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;
  box-shadow: 0 8px 25px rgba(229, 62, 62, 0.3) !important;
}

.deleted-title:hover {
  box-shadow: 0 12px 30px rgba(229, 62, 62, 0.4) !important;
}

/* 暂无删除项样式 */
.no-deleted-items {
  text-align: center;
  color: #909399;
  padding: 40px 20px;
  font-style: italic;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
}

.deleted-section .section-title {
  color: #c53030;
  background: #fed7d7;
  border-left-color: #e53e3e;
}

.deleted-collapse {
  border: 1px solid #fed7d7;
  border-radius: 8px;
}

.deleted-panel {
  background: #fffaf0;
}

.deleted-principle {
  border-left: 3px solid #f56565;
  background: #fef5e7;
}

.deleted-item {
  opacity: 0.8;
}

.deleted-badge {
  margin-left: 8px;
}

/* 工具提示样式 */
.full-width-tooltip {
  width: 100%;
  cursor: help;
}

.full-width-tooltip .text-content {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.full-width-tooltip:hover .text-content {
  white-space: normal;
  overflow: visible;
}

/* 层级展示样式 */
.hierarchy-collapse {
  margin-top: 20px;
}

.device-type-panel {
  margin-bottom: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.device-type-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.device-type-header.deleted-item {
  opacity: 0.6;
}

.device-type-tag {
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
}

.principle-count {
  color: #666;
  font-size: 13px;
  background: #f5f7fa;
  padding: 4px 8px;
  border-radius: 12px;
}

.deleted-badge {
  margin-left: auto;
}

.deleted-badge-small {
  margin-left: 8px;
}

/* 编写原则容器 */
.principles-container {
  padding: 16px 20px;
  background: #fafbfc;
}

.no-principles {
  text-align: center;
  color: #909399;
  padding: 20px;
  font-style: italic;
}

.principle-item {
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.principle-item:last-child {
  margin-bottom: 0;
}

.principle-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.principle-item.deleted-principle {
  opacity: 0.6;
  background: #fef0f0;
  border-color: #fbc4c4;
}

.principle-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;
}

.principle-index {
  font-weight: 600;
  color: #409eff;
  font-size: 16px;
  min-width: 24px;
}

.principle-content {
  padding: 16px;
}

.principle-row {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-start;
}

.principle-row:last-child {
  margin-bottom: 0;
}

.field-label {
  min-width: 80px;
  font-weight: 600;
  color: #333;
  margin-right: 12px;
  flex-shrink: 0;
  padding-top: 2px;
}

.field-content {
  flex: 1;
  line-height: 1.6;
  word-wrap: break-word;
}

.principle-actions {
  padding: 12px 16px;
  background: #f8f9fa;
  border-top: 1px solid #e4e7ed;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 折叠面板自定义样式 */
:deep(.hierarchy-collapse .el-collapse-item__header) {
  background: #f8f9fa;
  border: none;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
}

:deep(.hierarchy-collapse .el-collapse-item__wrap) {
  border: none;
  background: white;
}

:deep(.hierarchy-collapse .el-collapse-item__content) {
  padding: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .terminology-tabs {
    max-width: 100%;
    padding: 15px;
  }
  
  :deep(.terminology-table) {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .page-header h2 {
    font-size: 24px;
  }
  
  .page-header p {
    font-size: 14px;
  }
  
  :deep(.terminology-table td) {
    padding: 10px 8px !important;
  }
  
  .text-content {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .terminology-tabs {
    padding: 10px;
  }
  
  .terminology-card {
    margin-top: 15px;
  }
  
  :deep(.terminology-table th) {
    padding: 12px 8px !important;
    font-size: 13px !important;
  }
}

/* 操作按钮容器 */
.action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* 编辑按钮样式 */
.edit-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(66, 153, 225, 0.3) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.edit-btn:hover {
  background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.4) !important;
}

.edit-btn:active {
  transform: translateY(0) !important;
}

/* 删除按钮样式 */
.delete-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(229, 62, 62, 0.3) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.delete-btn:hover {
  background: linear-gradient(135deg, #c53030 0%, #9c2626 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.4) !important;
}

.delete-btn:active {
  transform: translateY(0) !important;
}

/* 按钮图标样式 */
.edit-btn .el-icon,
.delete-btn .el-icon {
  font-size: 16px !important;
  font-weight: bold !important;
}

.delete-btn-center {
  margin-left: auto;
  margin-right: 100px;
  transform: translateY(-1px);
}

/* Tooltip样式优化 */
:deep(.el-tooltip__popper) {
  background: #2d3748 !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

:deep(.el-tooltip__popper .el-popper__arrow::before) {
  background: #2d3748 !important;
  border: none !important;
}

/* Tabs 样式优化 */
:deep(.el-tabs) {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

:deep(.el-tabs__header) {
  margin-bottom: 20px;
}

:deep(.el-tabs__item) {
  color: #606266 !important;
  font-weight: 500;
  font-size: 16px;
}

:deep(.el-tabs__item.is-active) {
  color: #667eea !important;
  font-weight: 600;
}

:deep(.el-tabs__active-bar) {
  background-color: #667eea !important;
}

/* 按钮样式优化 */
:deep(.el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  font-weight: 500;
  padding: 10px 20px;
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

/* 自定义对话框样式 */
:deep(.custom-dialog) {
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

:deep(.custom-dialog .el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px 30px;
  border-radius: 16px 16px 0 0;
  position: relative;
  overflow: hidden;
}

:deep(.custom-dialog .el-dialog__header::before) {
  content: '';
  position: absolute;
  top: -50%;
  right: -20px;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: rotate(45deg);
}

:deep(.custom-dialog .el-dialog__title) {
  color: white !important;
  font-weight: 700;
  font-size: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

:deep(.custom-dialog .el-dialog__close) {
  color: white !important;
  font-size: 18px;
  transition: all 0.3s ease;
}

:deep(.custom-dialog .el-dialog__close:hover) {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: rotate(90deg);
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 30px;
  background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);
}

.dialog-content {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 10px;
}

/* 滚动条样式 */
.dialog-content::-webkit-scrollbar {
  width: 6px;
}

.dialog-content::-webkit-scrollbar-track {
  background: #f1f3f4;
  border-radius: 3px;
}

.dialog-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px;
}

.dialog-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

/* 表单样式增强 */
.custom-form {
  margin-top: 10px;
}

.form-item-enhanced {
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.form-item-enhanced:hover {
  transform: translateY(-2px);
}

:deep(.form-item-enhanced .el-form-item__label) {
  color: #2d3748 !important;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 输入框样式增强 */
.custom-input :deep(.el-input__wrapper) {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  background: linear-gradient(to right, #ffffff 0%, #f8fafc 100%);
}

.custom-input :deep(.el-input__wrapper:hover) {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  transform: translateY(-1px);
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

.custom-input :deep(.el-input__inner) {
  color: #ffffffff;
  font-size: 14px;
  /* font-weight: 300; */
}

/* 文本域样式增强 */
.custom-textarea :deep(.el-textarea__inner) {
  border-radius: 10px;
  border: 2px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
  background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
  color: #2d3748;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  resize: vertical;
  min-height: 80px;
}

.custom-textarea :deep(.el-textarea__inner:hover) {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  transform: translateY(-1px);
}

.custom-textarea :deep(.el-textarea__inner:focus) {
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

/* 字数统计样式 */
:deep(.el-input__count) {
  color: #6b7280;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 2px 6px;
}

/* 底部按钮区域 */
.dialog-footer {
  padding: 20px 0;
  text-align: center;
  background: linear-gradient(to right, #f8fafc 0%, #ffffff 100%);
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.cancel-btn {
  min-width: 100px;
  height: 44px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid #e2e8f0;
  background: white;
  color: #6b7280;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  border-color: #9ca3af;
  color: #374151;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.save-btn {
  min-width: 120px;
  height: 44px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.save-btn:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.save-btn:active {
  transform: translateY(0);
}

.mr-1 {
  margin-right: 6px;
}

/* 表单样式 */
:deep(.el-form-item__label) {
  color: #2c3e50 !important;
  font-weight: 500;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

:deep(.el-textarea__inner) {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 头部操作区样式 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 数据统计样式 */
.data-summary {
  margin: 20px 0;
}

:deep(.el-descriptions) {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}

:deep(.el-descriptions__header) {
  background: #f8f9fa !important;
}

:deep(.el-descriptions__label) {
  color: #606266 !important;
  font-weight: 500;
}

:deep(.el-descriptions__content) {
  color: #2c3e50 !important;
  font-weight: 600;
}

/* 搜索框样式 */
:deep(.el-input) {
  --el-input-border-radius: 8px;
}

:deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e4e7ed;
  transition: all 0.3s;
}

:deep(.el-input__wrapper:hover) {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

:deep(.el-input.is-focus .el-input__wrapper) {
  border-color: #667eea !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    padding: 30px 15px;
  }
  
  .page-header h2 {
    font-size: 28px;
  }
  
  .page-header p {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 25px 10px;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
  
  .page-header p {
    font-size: 13px;
  }
}
</style>